<template>
  <div class="myTask" v-loading="loadObj.task">
    <div
      class="task-item"
      v-for="(item, index) in taskArr"
      @click="openDialog(item)"
    >
      <div class="task-img" :class="item.class">
        <img :src="item.url" alt="" />
      </div>
      <div class="task-num">{{ item.num }}</div>
      <div class="task-title">{{ item.title }}</div>
    </div>

    <el-dialog
      custom-class="custom-dialog"
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      width="14.5rem"
    >
      <div
        class="dialog-body dialog-task-body custom-input"
        v-loading="loadObj.dialog"
      >
        <template v-if="dialogTitle == '待办任务'">
          <div class="head-search">
            <div class="search-form">
              <div class="dialog-search-item">
                <div class="search-left">标题</div>
                <el-input
                  placeholder="请输入标题"
                  v-model="waitObj.query.fieldQuery.processTitle"
                  size="mini"
                  clearable
                ></el-input>
              </div>
              <div class="dialog-search-item">
                <div class="search-left">流程类型</div>
                <el-input
                  placeholder="请输入流程类型"
                  v-model="waitObj.query.fieldQuery.processType"
                  size="mini"
                  clearable
                ></el-input>
              </div>
            </div>
            <div class="dialog-search-btn">
              <el-button
                type="primary"
                size="mini"
                @click="resetSearchFn('wait')"
                >重置</el-button
              >
              <el-button
                type="primary"
                size="mini"
                @click="searchFn(dialogTitle)"
                >筛选</el-button
              >
            </div>
          </div>
          <div class="list-box">
            <wait-task
              :showAll="taskObj.showAll"
              :tableData="waitObj.tableData"
              @sortTaskFn="sortTaskFn"
            ></wait-task>
          </div>
          <div class="dialog-page custom-page">
            <el-pagination
              small
              @size-change="handleSizeChangeWait"
              @current-change="handleCurrentChangeWait"
              :current-page="waitObj.query.nowPage"
              :page-sizes="pageSizes"
              :page-size="waitObj.query.pageNum"
              layout="total, sizes, prev, pager, next, jumper"
              :total="waitObj.totalNum"
            >
            </el-pagination>
          </div>
        </template>
        <template v-if="dialogTitle == '逾期任务'">
          <div class="head-search">
            <div class="search-form">
              <div class="dialog-search-item">
                <div class="search-left">标题</div>
                <el-input
                  placeholder="请输入标题"
                  size="mini"
                  v-model="timeoutObj.query.fieldQuery.processTitle"
                  clearable
                ></el-input>
              </div>
              <div class="dialog-search-item">
                <div class="search-left">流程类型</div>
                <el-input
                  placeholder="请输入流程类型"
                  size="mini"
                  v-model="timeoutObj.query.fieldQuery.processType"
                  clearable
                ></el-input>
              </div>
              <!-- <div class="dialog-search-item">
                <div class="search-left">审核状态</div>
                <el-select placeholder="请选择审核状态" v-model="timeoutObj.query.fieldQuery.processState" popper-class="custom-select" size="mini">
                  <el-option
                    v-for="item in statusArr"
                    :key="item.key"
                    :label="item.value"
                    :value="item.value">
                  </el-option>
                </el-select>
              </div> -->
            </div>
            <div class="dialog-search-btn">
              <el-button
                type="primary"
                size="mini"
                @click="resetSearchFn('timeout')"
                >重置</el-button
              >
              <el-button
                type="primary"
                size="mini"
                @click="searchFn(dialogTitle)"
                >筛选</el-button
              >
            </div>
          </div>
          <div class="list-box">
            <timeout-task
              :showAll="taskObj.showAll"
              :tableData="timeoutObj.tableData"
              @sortTaskFn="sortTaskFn"
            ></timeout-task>
          </div>
          <div class="dialog-page custom-page">
            <el-pagination
              small
              @size-change="handleSizeChangeHandle"
              @current-change="handleCurrentChangeHandle"
              :current-page="timeoutObj.query.nowPage"
              :page-sizes="pageSizes"
              :page-size="timeoutObj.query.pageNum"
              layout="total, sizes, prev, pager, next, jumper"
              :total="timeoutObj.totalNum"
            >
            </el-pagination>
          </div>
        </template>
        <template v-if="dialogTitle == '我的发起'">
          <div class="head-search">
            <div class="search-form">
              <div class="dialog-search-item">
                <div class="search-left">标题</div>
                <el-input
                  placeholder="请输入标题"
                  size="mini"
                  v-model="createObj.query.fieldQuery.processTitle"
                  clearable
                ></el-input>
              </div>
              <div class="dialog-search-item">
                <div class="search-left">当前办理人</div>
                <el-input
                  placeholder="请输入当前办理人"
                  size="mini"
                  v-model="createObj.query.fieldQuery.targetUser"
                  clearable
                ></el-input>
              </div>
              <div class="dialog-search-item">
                <div class="search-left">审核状态</div>
                <el-select
                  v-model="createObj.query.fieldQuery.processState"
                  placeholder="请选择审核状态"
                  clearable
                  popper-class="custom-select"
                  size="mini"
                >
                  <el-option
                    v-for="item in statusArr"
                    :key="item.key"
                    :label="item.value"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </div>
            </div>
            <div class="dialog-search-btn">
              <el-button
                type="primary"
                size="mini"
                @click="resetSearchFn('create')"
                >重置</el-button
              >
              <el-button
                type="primary"
                size="mini"
                @click="searchFn(dialogTitle)"
                >筛选</el-button
              >
            </div>
          </div>
          <div class="list-box">
            <create-task
              :showAll="taskObj.showAll"
              :tableData="createObj.tableData"
              @sortTaskFn="sortTaskFn"
              @urgeTaskSearchFn="urgeTaskSearchFn"
            ></create-task>
          </div>
          <div class="dialog-page custom-page">
            <el-pagination
              small
              @size-change="handleSizeChangeCreate"
              @current-change="handleCurrentChangeCreate"
              :current-page="createObj.query.nowPage"
              :page-sizes="pageSizes"
              :page-size="createObj.query.pageNum"
              layout="total, sizes, prev, pager, next, jumper"
              :total="createObj.totalNum"
            >
            </el-pagination>
          </div>
        </template>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getTaskNumApi,
  getWaitTaskApi,
  getHandleTaskApi,
  getCreateTaskApi, getUserSession,
} from "../api/myHome";
import WaitTask from "./WaitTask.vue";
// import HandleTask from "./HandleTask.vue";
import TimeoutTask from "./TimeoutTask.vue";
import CreateTask from "./CreateTask.vue";
export default {
  name: "",
  mixins: [],
  components: {
    WaitTask,
    TimeoutTask,
    CreateTask,
  },
  props: {},
  data() {
    return {
      sid: this._sid,
      dialogVisible: false,
      showAll: true,
      dialogTitle: "待办任务",
      statusArr: [
        { key: "1", value: "审批中" },
        { key: "2", value: "已取消" },
        { key: "3", value: "已完成" },
        { key: "4", value: "已挂起" },
        { key: "5", value: "已终止" },
        { key: "6", value: "状态异常" },
      ],
      pageSizes: [10, 20, 30, 40],
      waitObj: {
        query: {
          nowPage: 1,
          pageNum: 10,
          fieldQuery: {
            processTitle: "",
            processType: "",
            owerName: "",
            isYq: false,
            releaseTime: {
              beginTime: null,
              endTime: null,
            },
          },
          order: {
            processTitle: "",
            processType: "",
            owerName: "",
            arravieTime: "",
          },
        },
        totalNum: 0,
        tableData: [],
      },
      timeoutObj: {
        query: {
          nowPage: 1,
          pageNum: 10,
          fieldQuery: {
            processTitle: "",
            processType: "",
            owerName: "",
            isYq: true,
            releaseTime: {
              beginTime: null,
              endTime: null,
            },
          },
          order: {
            processTitle: "",
            processType: "",
            owerName: "",
            arravieTime: "",
          },
        },
        totalNum: 0,
        tableData: [],
      },
      createObj: {
        query: {
          nowPage: 1,
          pageNum: 10,
          fieldQuery: {
            processTitle: "",
            processType: "",
            targetUser: "",
            processState: "",
            releaseTime: {
              beginTime: "",
              endTime: "",
            },
          },
          order: {
            processTitle: "",
            processType: "",
            targetUser: "",
            processState: "",
            processCreateData: "",
          },
        },
        totalNum: 0,
        tableData: [],
      },
      taskObj: {
        isHome: true,
      },
      taskArr: [
        {
          key: "todo",
          title: "待办任务",
          url: require("../assets/img/myHome/task1.png"),
          num: 0,
          class: "task-img1",
        },
        {
          key: "yq",
          title: "逾期任务",
          url: require("../assets/img/myHome/task2.png"),
          num: 0,
          class: "task-img2",
        },
        {
          key: "mycreate",
          title: "我的发起",
          url: require("../assets/img/myHome/task3.png"),
          num: 0,
          class: "task-img3",
        },
      ],
      loadObj: {
        task: false,
        dialog: false,
      },
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    this.getTaskNumFn();
  },
  methods: {
    getTaskNumFn() {
      this.loadObj.task = true;
      getTaskNumApi(this.sid).then((res) => {
        if (res.result == "ok") {
          for (let i = 0; i < this.taskArr.length; i++) {
            this.taskArr[i].num = res.data[this.taskArr[i].key];
          }
        } else {
          // this.$notify({
          //   title: '错误',
          //   message: res.msg + ', ' + res.data.desc,
          //   type: 'error'
          // });
        }
        this.loadObj.task = false;
      });
    },
    openDialog(item) {
      this.dialogVisible = true;
      this.dialogTitle = item.title;
      if (item.title == "待办任务") {
        this.waitObj.query.nowPage = 1;
        this.getWaitTaskFn(this.waitObj.query);
      } else if (item.title == "我的发起") {
        this.createObj.query.nowPage = 1;
        this.getCreateTaskFn(this.createObj.query);
      } else if (item.title == "逾期任务") {
        this.timeoutObj.query.nowPage = 1;
        this.getTimeoutTaskFn(this.timeoutObj.query);
      }
    },
    searchFn(title) {
      if (title == "待办任务") {
        this.waitObj.query.nowPage = 1;
        this.getWaitTaskFn(this.waitObj.query);
      } else if (title == "我的发起") {
        this.createObj.query.nowPage = 1;
        this.getCreateTaskFn(this.createObj.query);
      } else if (title == "逾期任务") {
        this.timeoutObj.query.nowPage = 1;
        this.getTimeoutTaskFn(this.timeoutObj.query);
      }
    },
    getWaitTaskFn(params) {
      this.loadObj.dialog = true;
      getWaitTaskApi(this.sid, JSON.stringify(params)).then((res) => {
        if (res.result == "ok") {
          if (res.result == "ok") {
            this.waitObj.tableData = res.data.list;
            this.waitObj.totalNum = res.data.totalNum;
          }
        }
        this.loadObj.dialog = false;
      });
    },
    getTimeoutTaskFn(params) {
      this.loadObj.dialog = true;
      getWaitTaskApi(this.sid, JSON.stringify(params)).then((res) => {
        if (res.result == "ok") {
          this.timeoutObj.tableData = res.data.list;
          this.timeoutObj.totalNum = res.data.totalNum;
        }
        this.loadObj.dialog = false;
      });
    },
    getCreateTaskFn(params) {
      this.loadObj.dialog = true;
      getCreateTaskApi(this.sid, JSON.stringify(params)).then((res) => {
        if (res.result == "ok") {
          this.createObj.tableData = res.data.list;
          this.createObj.totalNum = res.data.totalNum;
        }
        this.loadObj.dialog = false;
      });
    },
    handleSizeChangeWait(val) {
      console.log(`每页 ${val} 条`);
      this.waitObj.query.nowPage = 1;
      this.waitObj.query.pageNum = val;
      this.getWaitTaskFn(this.waitObj.query);
    },
    handleCurrentChangeWait(val) {
      console.log(`当前页: ${val}`);
      this.waitObj.query.nowPage = val;
      this.getWaitTaskFn(this.waitObj.query);
    },
    handleSizeChangeHandle(val) {
      console.log(`每页 ${val} 条`);
      this.timeoutObj.query.pageNum = val;
      this.getTimeoutTaskFn(this.timeoutObj.query);

    },
    handleCurrentChangeHandle(val) {
      this.timeoutObj.query.pageNum = 1;
      this.timeoutObj.query.nowPage = val;
      this.getTimeoutTaskFn(this.timeoutObj.query);
    },
    handleSizeChangeCreate(val) {
      console.log(`每页 ${val} 条`);
      this.createObj.query.nowPage = 1;
      this.createObj.query.pageNum = val;
      this.getCreateTaskFn(this.createObj.query);

    },
    handleCurrentChangeCreate(val) {
      this.createObj.query.nowPage = val;
      this.getCreateTaskFn(this.createObj.query);
    },
    sortTaskFn(obj) {
      if (obj.type == "create") {
        // 我的创建
        this.createObj.query.order[obj.column.prop] = obj.column.selectedSort;
        this.getCreateTaskFn(this.createObj.query);
      } else if (obj.type == "wait") {
        this.waitObj.query.order[obj.column.prop] = obj.column.selectedSort;
        this.getWaitTaskFn(this.waitObj.query);
      } else if (obj.type == "timeout") {
        this.timeoutObj.query.order[obj.column.prop] = obj.column.selectedSort;
        this.getTimeoutTaskFn(this.timeoutObj.query);
      }
    },
    resetSearchFn(type) {
      if (type == "create") {
        this.createObj.query.nowPage = 1;
        this.createObj.query.fieldQuery.processTitle = "";
        this.createObj.query.fieldQuery.processType = "";
        this.createObj.query.fieldQuery.targetUser = "";
        this.createObj.query.fieldQuery.processState = "";
        this.getCreateTaskFn(this.createObj.query);
      } else if (type == "wait") {
        this.waitObj.query.nowPage = 1;
        this.waitObj.query.fieldQuery.processTitle = "";
        this.waitObj.query.fieldQuery.processType = "";
        this.waitObj.query.fieldQuery.owerName = "";
        this.getWaitTaskFn(this.waitObj.query);
      } else if (type == "timeout") {
        this.timeoutObj.query.nowPage = 1;
        this.timeoutObj.query.fieldQuery.processTitle = "";
        this.timeoutObj.query.fieldQuery.processType = "";
        this.timeoutObj.query.fieldQuery.owerName = "";
        this.getTimeoutTaskFn(this.timeoutObj.query);
      }
    },
    urgeTaskSearchFn() {
      this.createObj.query.nowPage = 1;
      this.getCreateTaskFn(this.createObj.query);
    },
  },
};
</script>

<style scoped lang="scss">
@import "../style/common.scss";
.myTask {
  display: flex;
  .task-item {
    cursor: pointer;
    height: 2.3rem;
    width: 1.7rem;
    margin-right: 0.1rem;
    box-shadow: 0.01rem 0.01rem 0.15rem #cecece;
    background-image: linear-gradient(#e9f0fb, #f3f7fd);
    border-radius: 0.16rem;
    &:last-child {
      margin-right: 0;
    }
    .task-img {
      border-radius: 100%;
      border: 0.15rem solid #ddf1f0;
      width: 0.7rem;
      height: 0.7rem;
      margin: 0.2rem auto 0.1rem auto;
      background-color: #8edebc;
      display: flex;
      align-items: center;
      justify-content: center;
      img {
        width: 0.45rem;
      }
    }
    .task-img2 {
      border-color: #efdfe7;
      background-color: #f1878b;
    }
    .task-img3 {
      border-color: #f2f0e5;
      background-color: #fedf87;
    }
    .task-num {
      font-size: 0.4rem;
      font-weight: bold;
      color: #333;
    }
    .task-title {
      color: #999;
      font-size: 0.18rem;
      margin-top: 0.05rem;
    }
  }
}
.dialog-task-body {
  .head-search {
    display: flex;
    font-size: $min-size;
    font-weight: bold;
    .search-form {
      display: flex;
      width: 100%;
      .dialog-search-item {
        display: flex;
        align-items: center;
        margin-right: 0.5rem;
        width: 3.3rem;
        .search-left {
          white-space: nowrap;
          padding-right: 0.1rem;
        }
      }
    }
    .dialog-search-btn {
      width: 2rem;
      display: flex;
      justify-content: end;
    }
  }
  .list-box {
    min-height: 6rem;
  }
}
.dialog-page {
  padding: 0.2rem 0 0.5rem 0;
  padding: 0.2rem 0 0.3rem 0;
  text-align: right;
}
</style>

